//
// Avant
// (c) The Red Team
//
// Leftbar/Sidebar
// --------------------------------------------------

#page-leftbar	{
	.clearfix();
	float: left; 
	background: @sidebar-background; 
	white-space: nowrap; 
	position:relative; 
	box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
}

#page-leftbar .collapse.in {padding: 5px 0 5px}
#page-leftbar .collapse {padding: 0;}

/* Sidebar Menu */

#sidebar {
	white-space: normal; margin: 10px 0 0 0; padding-left: 0 !important; 

	.badge {font-weight: 600; background-color: rgba(21, 22, 26, 0.6); right: 25px !important;}
	i {color: @sidebar-icon-color; margin-left: 1px; margin-right: 8px; min-width: 15px; text-align: center; display: inline-block;}

	.divider {
		height: 1px; width: 100%; 
		margin: 10px 0px; overflow: hidden; 
		box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
		background-color: @sidebar-divider; 
		&:hover {background-color: @sidebar-divider}
	}
	
	a {text-decoration: none;}
	ul {padding: 5px 0;list-style: none;}
	ul {padding-left: 0 !important}
	ul, ul li a {background: @sidebar-submenu-bg; color: @sidebar-submenu-color; box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1);}
	
	//Main Menu Styles - Level 1
	li.active i, li.active a:hover i {color: @sidebar-active-color;}
	li a {color: @sidebar-menu-color;display: block;padding: 10px;position: relative;}
	a:hover {background-color: @sidebar-hover-bg; color: @sidebar-hover-color; box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
		i {color: @sidebar-hover-color;}
	}
	>li.active>a {background: @sidebar-active-bg; color: @sidebar-active-color; box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
		&:after {
			width: 0px; height: 0px;
			border-style: solid;
			border-width: 9px 9px 9px 0;
			border-color: transparent @body-bg transparent transparent;

			content: "";
			position: absolute;
			top: 50%; margin-top: -9px;right: 0px;
		}
	}
	
	// Submenu Styles - Level 2
	ul li a {padding: 5px 10px 5px 37px;}
	ul li.active:not(.open)>a {font-weight: 600; color: @sidebar-menu-color;}
	   li ul {display: none;}
	
	ul ul {padding: 0;} //Removes the extra stacked padding
	
	// All other levels
	li li li a {padding-left: 60px;} //level 3
	ul ul ul li a {padding-left: 80px} // level 4
	ul ul ul ul li a {padding-left: 100px} // level 5
}


//Arrows
#sidebar li.hasChild>a {position: relative; .clearfix();}

/* Remove the :hover from the following lines for arrows to appear always */
#sidebar:hover li.hasChild>a:before, #sidebar:hover li.hasChild.open>a:before {content: "\f105"; .opacity(0.5)}
#sidebar:hover li.hasChild.open>a:before {content: "\f107"; .opacity(0.5)}

#sidebar li.hasChild>a:before, #sidebar li.hasChild.open>a:before {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 14px !important;

  text-decoration: inherit;
  text-align: right;
  font-size: 14px;
  padding-right: 0px;

  float: right;
}

#sidebar li.hasChild li.hasChild a:before{top: 5px;}


body.collapse-leftbar { 
  #sidebar > li.hasChild.open>a:before {content:"";}
  #sidebar > li.hasChild > a:before {content:"";}

  // sidebar arrow
  // #sidebar > li.hasChild:hover>a:before {content: "\f107";}
  #sidebar > li.hasChild:hover>a:before {content: "";}
}


// Fixed Sidebar
//body.fixed-sidebar #sidebar {
//	position: fixed;
//	bottom: 0;
//	width: 230px;
//}


/* Sidebar Layout + Responsive */

#page-leftbar 	{width: 230px;}
#page-content 	{margin-left: 230px;}
#wrap 			{overflow: hidden;}


// Show/Hide Sidebar

@media (max-width: @screen-xs-max) {
	#page-leftbar {
		/* Collapsed */
		width: 0;
		z-index: @zindex-navbar-fixed - 1;
	}

	#page-content, #sidebar {.transition(~"250ms ease"); }

	#sidebar {white-space: nowrap;}

	#page-content {
		width: 100%;
		margin-left: 0;
	}

	footer {margin-left: 0;}

	body.show-leftbar {
		#page-leftbar 	{width: 230px;}
		#page-content 	{margin-left: 230px;}
		footer 			{.translate(230px,0);}
	}
}


/* Search at Left Navigation Sidebar */
#search {
	line-height: 0;

	> a {display: none !important;}

	form {
		margin: 0px 0px 0px 0px;
		padding: 0 0px 0px 0px;
		position: relative;
		
		.search-query {
			background: @search-bg;
			box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
			color: @search-color;

			padding: 0 10px 0 37px;
			border-radius:0px;
			min-height: 40px;
			line-height: 18px;
			width: 100%;
			.placeholder(fade(@search-color,50%));
		
			&:focus {
				box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1); .placeholder(~"transparent");
				+ button i {.opacity(1);}
			}

			&, &:active, &:focus {
				border: none;
			}
		}
		
		button[type="submit"] {
			float: left;
			position: absolute;
			top: 0;left: 10px;
			border: 0; background: none;
			padding: 13px 0;margin: 0;min-width: none;
			i {color:@search-color;.opacity(0.5)}
		}
	}
}

// Collapse Sidebar

body.collapse-leftbar {
	#page-leftbar			{width: 	  40px;}
	#page-content, footer	{margin-left: 40px;}

	#sidebar {
		>li {
			white-space: nowrap;
			z-index: 999;
			position: relative;
			span{display: none;}

			> ul {
				position: absolute;
				width: 210px; // 250-42
				left: 40px;
			}

			&:hover, &.keep-open {
				box-shadow: inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
				background: @sidebar-hover-bg;
				width: 250px;
				span {display:inline;}
				> ul {display: block;}
					&.divider {width: 40px !important;}
				> a, a i {color: @sidebar-hover-color;}
			}

			&.active:hover {
				>a:after {display: none;}
				>a,>a i {color: @sidebar-active-color;}
			}
		}
	
		i {margin-right: 20px !important; margin-left: 1px;}

		li li a {padding-left: 10px;}
		li li li a {padding-left: 20px;}
		li li li li a {padding-left: 30px;}
	}

	#search {
		&:hover {width: 40px !important;}
		&:hover, &:hover a {background: none !important; box-shadow: none !important;}
	
		a {display: block !important; padding: 13px 10px;}
		form {display: none;}
		.opacity-control{.opacity(0.5);}
	
		&.keep-open {
			width: 250px !important;
			> a {
				background: @search-bg !important;
				&:hover {background: @search-color;}
			}
			form {
				display: block;
	
				width: 220px;
				position: absolute;
				top: 0; left: 30px;
	
				.search-query {
					border:0;
					background: transparent;
					padding: 0 10px 0 10px;
					position: relative !important;
					z-index: @zindex-modal-background+10;
					width: 100%;
				}
				button[type="submit"] {display: none;}
			}
		}
	}
}